<template>
  <div class="login">
    <div class="content">
      <a-form :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">

        <a-form-item label="用户" name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 4, span: 16 }">
          <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import {$doLogin} from '@/api/apis/aa';
import { useRouter } from 'vue-router';
import { md5 } from "js-md5";
const $router= useRouter();
const formState = reactive({
  username: '',
  password: '',
  remember: false,
});
const onFinish = async values => {
  values.password = md5(md5(values.password).split('').reverse().join(''));
  let ret = await $doLogin(values);
  if(ret){
    $router.push('/admin');
  }
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
</script>

<style scoped>
.login {
  width: 100vm;
  height: 100vh;
  background: linear-gradient(to bottom, rgb(110, 134, 146), rgb(168, 212, 242));
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    padding: 20px;
    width: 500px;
    padding-bottom: 0px;
    border: 1px, solid, #fff;
    border-radius: 6px;
  }
}
</style>